/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-06-20 10:57:57
 * @LastEditTime : 2023-06-20 11:14:20
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\HomePage\Tunnel.jsx
 * @Description  :
 */
import './Scss/Tunnel.scss'

import { Http } from '../../../../Api'
import { useEffect, useState } from 'react'
import { ColumnDataSetUp } from './Common'
import { useRequest, useSessionStorageState, useSize } from 'ahooks'
import { Column } from '@ant-design/plots'
import { useRef } from 'react'
import { colorRgb } from '../../../../Configure/Common'

export const Tunnel001 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [temporaryData] = useSessionStorageState('temporaryData')
    const [list, setList] = useState()

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => setList(res.list.map(({ tableName, per }) => ({ type: tableName, 进度: per }))),
    })

    useEffect(() => {
        runAsync({ url: 'getTunnelInfoStatistics' })
    }, [runAsync])

    return (
        <div className="Tunnel001">
            <div className="HomePageTitle">隧道统计</div>
            <div className="list" ref={ChartsBox}>
                {list && size && (
                    <Column {...ColumnDataSetUp(list, colorRgb(temporaryData.themeColor, 1), '进度', size, ' %')} />
                )}
            </div>
        </div>
    )
}
